<template>
	<view class="beijingse" v-if="pageShow">
		<!-- 分享 -->
		<u-popup :show="fxshow" @close="fxclose">
			<view class="mainpadding">
				<view class="sanshier xiaohei nofonweight textcenter">分享到</view>
				<view class="flexbetween margin_top xiahuaxian">
					<view class="wushi flexcenter">
						<button open-type="share" class="flexcolumn">
							<view class="">
								<u-icon name="weixin-circle-fill" color="#08BE14" size="38"></u-icon>
							</view>
							<view class="strongtext xiaohei nofonweight margin_top1">微信好友</view>
						</button>
					</view>
					<view class="wushi flexcenter">
						<button open-type="share" class="flexcolumn">
							<view class="">
								<u-icon name="moments-circel-fill" color="#08BE14" size="38"></u-icon>
							</view>
							<view class="strongtext xiaohei nofonweight margin_top1">朋友圈</view>
						</button>
					</view>
				</view>
				<view class="sanshier xiaohei nofonweight textcenter margin_top" @click="fxclose">取消</view>
			</view>
		</u-popup>
		<!-- 产品参数 -->
		<u-popup :show="cpshow" @close="cpclose">
			<view class="mainpadding">
				<view class="guanbi" @click="cpclose">
					<u-icon name="close" color="#999999"></u-icon>
				</view>
				<view class="xiahuaxian">
					<view class="sanshier xiaohei textcenter">产品参数</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">规格</view>
					<view class="ershiba xiaohei">{{dataAll.Standard}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">UPC码</view>
					<view class="ershiba xiaohei">{{dataAll.BarCode}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">产地</view>
					<view class="ershiba xiaohei">{{dataAll.ProArea}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">用法</view>
					<view class="ershiba xiaohei">{{dataAll.UseWay}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">用量</view>
					<view class="ershiba xiaohei">{{dataAll.UseWay}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="ershiba xiaohui margin_right3">功能主治</view>
					<view class="ershiba xiaohei">{{dataAll.Indications}}</view>
				</view>
			</view>
		</u-popup>
		<!-- g规格 -->
		<u-popup :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexright" @click="show=false">
					<u-icon name="close" size="22"></u-icon>
				</view>
				<view class=" flexleft">
					<view class="guitp margin_right2">
						<image :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="strongtext xiaohong margin_right3">厂商指导价
						<text class="bigtext xiaohong"> ￥{{dataAll.RetailStdPrice}}</text>
					</view>
					<view class="honhbtn">成本补贴价 ￥{{dataAll.vipprice}}</view>
				</view>
				<view class="huisebox flexbetween margin_top2">
					<view class="strongtext xiaohei nofonweight">好评率：{{dataAll.pj_rate}}</view>
					<view class="strongtext xiaohui nofonweight">评论数量：{{dataAll.comment_num}}（条）</view>
				</view>
				<!-- 规格详情 -->
				<view class="ershiba xiaohei margin_top2">商品库存</view>
				<view class="qianhov margin_top1 flexleft mainpadding2s">
					<view class="guietu margin_right2">
						<image :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="" style="width: 70%;">
						<view class="strongtext xiaohei nofonweight">{{dataAll.FullName}}</view>
						<view class="margin_top1 ershiba xiaohei">店铺库存数量：
							<text class="sanshier xiaohong">{{dataAll.stock}}</text>
						</view>
					</view>
				</view>
				<!-- 门店分布 -->
				<view class="ershiba xiaohei margin_top2">门店分布</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class=" mainpadding2s flexbetween margin_top" :class="PosId==item.PosId?'qianhov1':'qianhov'"
						v-for="item in mdList" :key="item.PosId" @click="PosId=item.PosId;">
						<view class="" style="width: 90%;">
							<view class="flexleft">
								<view class="xiaohui sanshier margin_right2 xiankuan" style="width: 400rpx;">
									{{item.PosName}}
								</view>
								<view class="xiaohui strongtext">距您{{httpRequest.returnKmUnit(Number(item.distance))}}
								</view>
							</view>
							<view class="flexleft margin_top1">
								<view class="margin_right1">
									<u-icon name="map" size="22"></u-icon>
								</view>
								<view class="xiaohui strongtext yhxk">{{item.adres}}</view>
							</view>
						</view>
						<view class="">
							<u-icon name="checkmark-circle-fill" v-if="PosId==item.PosId" color="#F99740"
								size="24"></u-icon>
							<u-icon name="checkmark-circle-fill" v-if="PosId!=item.PosId" color="#999"
								size="24"></u-icon>
						</view>
					</view>
				</scroll-view>
				<!-- 购买数量 -->
				<view class="flexbetween margin_top">
					<view class="xiaohei ershiba">购买数量</view>
					<view class="flexright">
						<view class="margin_right1" @click="reducefn">
							<u-icon name="minus-circle" size="22"></u-icon>
						</view>
						<input class="input margin_right1 textcenter" type="number" v-model="number">
						<view class="" @click="addfn">
							<u-icon name="plus-circle" size="22"></u-icon>
						</view>
					</view>
				</view>
				<view class="margin_top bigbtn" @click="close">确定</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 200rpx;">
			<u-swiper :list="dataAll.images_text" height="303" circular radius="0"></u-swiper>
			<view class="mainpadding ffffff flexbetween">
				<view class="flexleft">
					<view class="margin_right2 xiaohei strongtext nofonweight">厂商指导价￥{{dataAll.RetailStdPrice}}</view>
					<view class="ershiba xiaohong fonweight">成本补贴价
						<text class="sanshier xiaohong fonweight">￥{{dataAll.vipprice}}</text>
					</view>
				</view>
				<button open-type="share">
					<u-icon name="share-square" size="26"></u-icon>
				</button>
				<!-- <view class="" @click="sharebtn">
					<u-icon name="share-square" size="26"></u-icon>
				</view> -->
			</view>
			<view class="mainpadding">
				<view class="mainpadding ffffff radius">
					<view class="sanshier xiaohei nofonweight">{{dataAll.FullName}}</view>
					<view class="xiaohei strongtext margin_top" v-if="dataAll.buy_des">购买须知：
						<text class="xiaohui strongtext">{{dataAll.buy_des}}</text>
					</view>
					<view class="flexbetween margin_top" @click="show = true">
						<view class="flexleft">
							<view class="strongtext xiaohei nofonweight">门店库存：</view>
							<view class="strongtext xiaohei nofonweight yhxk" style="width: 460rpx;">
								已选：{{dataAll.FullName}}*{{number}}</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
					</view>
					<view class="flexbetween margin_top" @click="cpshow = true">
						<view class="flexleft">
							<view class="strongtext xiaohei nofonweight">商品信息：</view>
							<view class="strongtext xiaohei nofonweight yhxk" style="width: 460rpx;">
								规格：{{dataAll.Standard}}</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
					</view>
				</view>
				<!-- 评价 -->
				<view class="mainpadding ffffff margin_top radius" v-if="dataAll.comment_num!=0">
					<view class="flexbetween" @click="tzckpj(listid)">
						<view class="ershiba xiaohei fonweight">评价
							<text class="ershiba xiaohei nofonweight"> {{dataAll.comment_num}}条</text>
						</view>
						<view class="flexright">
							<view class="margin_right1 xiaohui nofonweight strongtext">好评度 {{dataAll.pj_rate}}</view>
							<view class="">
								<u-icon name="arrow-right" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view class="margin_top" v-for="(item,index) in pjList" :key="item.id" v-if="index<2">
						<view class="flexleft">
							<view class="touxiang margin_right1">
								<image :src="item.userinfo.avatar" mode=""></image>
							</view>
							<view class="">
								<view class="xiaohei strongtext">{{item.userinfo.nickname}}</view>
								<view class="">
									<u-rate count="5" readonly v-model="item.lxmy_starnum"></u-rate>
								</view>
							</view>
						</view>
						<view class="xiaohei strongtext margin_top1">{{item.content}}</view>
						<view class="flexleft flex_wrap" style="width: 100%;">
							<view class="flexcenter margin_top" style="width: 16.6%;"
								@click="lbtpriview(inde,item.images_text)" v-for="(ite,inde) in item.images_text"
								:key="inde">
								<view class="pitup">
									<image :src="ite" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="margin_top">
					<view class="xiaocheng strongtext fonweight textcenter">/ 猜你想找 /</view>
					<!-- 商品列表 -->
					<view class="flexcenter" v-if="!list.data.length">
						<view class="placeholderimage" style="margin-top: 100rpx;"></view>
					</view>
					<view class="flexbetween flex_wrap">
						<view class="spbox margin_top dingwei" v-for="item in list.data" :key="item.Rec"
							@click="tzspxq(item.Rec)">
							<!-- <view class="jianth"></view> -->
							<view class="shangpt">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="huisebox ">
								<view class="sanshier xiaohei fonweight yhxk">{{item.FullName}}</view>
								<view class="flexbetween margin_top1">
									<view class="strongtext xiaohong ">月销量{{item.mouthsales}}</view>
									<view class="strongtext xiaohui ">库存 {{item.stock}}</view>
								</view>
								<view class="strongtext xiaohei yhxk margin_top1" v-if="item.comment_des">
									最新评价：{{item.comment_des}}</view>
							</view>
							<view class="fensbox ">
								<view class="strongtext xiaoka nofonweight">成本补贴价
									<text class="strongtext xiaoka fonweight">￥{{item.vipprice}}</text>
								</view>
								<!-- <view class="flexbetween margin_top1">
									<view class="smalltext xiaoka nofonweight ">厂商指导价
										<text class="smalltext xiaoka fonweight">￥{{item.RetailStdPrice}}</text>
									</view>
									<view class="smalltext xiaoka nofonweight  textright">可省
										<text class="smalltext xiaohong fonweight">{{item.zjPrice}}元</text>
									</view>
								</view> -->
								<view class="">
									<view class=" margin_top1 smalltext xiaoka nofonweight ">厂商指导价
										<text
											class="smalltext xiaoka fonweight textright">￥{{item.RetailStdPrice}}</text>
									</view>

								</view>
								<view class="flexright margin_top1">
									<view class=" ershil xiaoka nofonweight ">可省</view>
									<text class="xiaohong fonweight" style="font-size: 30rpx;">{{item.zjPrice}}元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff mainpadding flexbetween ">
			<view class="strongtext xiaohei">当前需付：
				<text class="ershiba xiaohong fonweight">￥{{Number(dataAll.RetailStdPrice) * number}}</text>
			</view>
			<view class="jrgbtn" @click="joincar()">加入购物车</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				httpRequest,
				count: 5,
				value: 2,
				show: false,
				cpshow: false,
				fxshow: false,
				listid: "",
				dataAll: {},
				pageShow: false,
				number: 1,
				lat: "35.17466",
				lng: "109.67307",
				mdList: [],
				PosId: "", //开卡门店
				list: {
					data: []
				},
				page: 1,
				pjList: [],
				pagedown: true,
			}
		},
		onLoad(options) {
			this.listid = options.id
			if (options.code) {
				uni.setStorageSync("invite_code", options.code)
			}
			this.getDetail()
			// #ifdef MP-WEIXIN
			this.getlocations()
			// #endif
			// #ifdef H5
			this.getmdList()
			// #endif
			this.init()
			this.getpjList()
		},
		onShareAppMessage() {
			return {
				title: this.dataAll.FullName,
				path: "pages_index/shangpxq?id=" + this.listid + "&code=" + uni.getStorageSync(
					"yqm"),
			}
		},

		methods: {
			onShareTimeline() {
				return {
					title: "一点点大药房",
					path: "pages_index/shangpxq?id=" + this.listid + "&code=" + uni.getStorageSync(
						"yqm"),
				}
			},
			sharetimeline() {
				uni.share({
					title: this.dataAll.FullName,
					imageUrl: this.dataAll.image_text,
					path: "pages_index/shangpxq?id=" + this.listid + "&code=" + uni.getStorageSync(
						"yqm"),
				})
			},

			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_index/shangpxq?id=' + id
				})
			},
			init(isPage, page) {
				let _this = this;
				let url = '/api/goodscl/goodsindex'
				let data = {
					page: page || 1,
					limit: 12,
					index3_show: 1
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						if (res.data.length == 0) {
							this.pagedown = false
						}
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(res.data);
						} else {
							_this.list.data = res.data;
							this.pagedown = true
							this.page = 1
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (!this.pagedown) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			sharebtn() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				this.fxshow = true
			},
			joincar() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				this.show = true;
				// httpRequest.toast("请选择门店")
				return false
				
			},
			getlocations() {
				console.log(1212);
				let _this = this
				uni.getLocation({
					type: 'wgs64',
					success: function(res) {
						console.log(res, "获取位置成功");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getmdList()
					},
					fail(err) {
						uni.showModal({
							content: '检测到您没打开定位功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({ //opensetting是调起设置页面的
										success: (res) => {
											console.log(res.authSetting);
											if (res.authSetting ==
												true) { //判断res.authsetting的值是true还是false
												_this.getlocations()
											} else {
												_this.getlocations()
												console.log("拒绝授权");
											}
										}
									})
								} else {
									console.log('取消');
									return false;
								}
							}
						})
						console.log(err, "cuowu");
					}
				});
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getmdList() {
				httpRequest.request('/api/index/shopIndex', 'GET', {
					lat: this.lat,
					lng: this.lng,
					goods_id: this.listid
				}).then(res => {
					this.mdList = res.data
				})
			},
			getpjList() {
				httpRequest.request('/api/goodscl/goodsCommentIndex', 'GET', {
					goods_id: this.listid
				}).then(res => {
					this.pjList = res.data.data
				})
			},
			addfn() {
				this.number = Number(this.number) + 1
			},
			reducefn() {
				if (this.number == 1) {
					return false
				}
				this.number = Number(this.number) - 1
			},
			getDetail() {
				httpRequest.request('/api/goodscl/goodsDetail', 'GET', {
					goods_id: this.listid
				}).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			/* 跳转查看评价 */
			tzckpj(id) {
				uni.navigateTo({
					url: '/pages_index/shangppj?id=' + id
				})
			},
			close() {
				
				if (this.PosId == "") {
					httpRequest.toast("请选择门店")
					return false
				}
				this.show = false
				uni.showLoading({
					title: "请稍后"
				})
				httpRequest.request('/api/cart/addCart', 'GET', {
					shop_id: this.PosId,
					number: this.number,
					goods_id: this.listid
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
				})
			},
			cpclose() {
				this.cpshow = false
			},
			fxclose() {
				this.fxshow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	button {
		border-radius: 0;
		background-color: rgba(0, 0, 0, 0);
		line-height: 40rpx;
		margin: 0;
	}

	.guanbi {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.input {
		width: 120rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 10rpx 30rpx;
		background: #F2F2F2;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.qianhov {
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.qianhov1 {
		border: 1rpx solid #EE6F2D;
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.guietu {
		width: 131rpx;
		height: 131rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.shili {
		width: 189rpx;
		height: 199rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.honhbtn {
		width: 300rpx;
		height: 59rpx;
		background: #C01933;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #FFFFFF;
	}

	.guitp {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.jrgbtn {
		width: 420rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #FF8021 0%, #FFCF13 0%, #FF994A 100%);
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 商品列表
	.jianth {
		width: 28rpx;

		height: 38rpx;
		position: absolute;
		right: 42rpx;
		bottom: 48rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jiant.png');
	}

	.fensbox {
		padding: 10rpx 20rpx;
		background: #FED8D2;
		border: 0 0 20rpx 20rpx;
	}

	.huisebox {
		padding: 10rpx 20rpx;
		background: #E6E6E6;
	}

	.spbox {
		width: 48%;
	}

	.shangpt {
		height: 320rpx;
		width: 100%;
		border: 20rpx 20rpx 0 0;

		image {
			width: 100%;
			height: 100%;
			border: 20rpx 20rpx 0 0;
		}
	}

	// 结束
	.pitup {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.touxiang {
		width: 57rpx;
		height: 57rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
</style>